<template>
  <div class="app-breadcrumb">
    <n-breadcrumb separator=">" @update:value="breadcrumbHandleChange">
      <n-breadcrumb-item v-for="item in props.breadcrumbOptions" :key="item.key" @click="breadcrumbHandleClick(item)">
        {{ item.label }}
      </n-breadcrumb-item>
    </n-breadcrumb>
  </div>
</template>

<script setup lang="js">
import { nextTick, watch } from 'vue'

const props = defineProps(['breadcrumbOptions'])
const emits = defineEmits(['breadcrumbHandleClick'])

function breadcrumbHandleChange(value) {
  console.log('Breadcrumb value changed to:', value)
}

function breadcrumbHandleClick(item) {
  console.log('Breadcrumb item Click:', item)
  emits('breadcrumbHandleClick', item)
}

watch(() => props.breadcrumbOptions, (newValue, oldValue) => {
  nextTick(() => {

  })
})
</script>

<style scoped lang="scss">
.app-breadcrumb {
  width: 100%;
  height: 100%;
  padding-top: 10px;
  padding-left: 20px;
  border-bottom: 1px solid #f0f1f2;
}
</style>